<!--
 * @Description: 新建站点
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-12 11:16:09
 * @LastEditTime: 2021-11-13 17:27:58
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="site-content">
    <div class="info">
      <h1 class="title">新建站点</h1>
      <el-form :model="form" class="form" :rules="rules" ref="siteForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <!-- 站点名称 -->
            <el-form-item label="站点名称" prop="sitename" key="sitename">
              <el-input v-model="form.sitename" maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <!-- 站点类型 -->
            <el-form-item label="站点类型" prop="siteType" key="siteType">
              <el-select
                :disabled="lanWan"
                v-model="form.siteType"
                style="width: 100%;"
                @change="selDeviceType"
              >
                <el-option value="POP" label="POP"></el-option>
                <el-option value="CPE" label="CPE"></el-option>
                <el-option value="HUB" label="HUB CPE"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <!-- 设备型号 -->
            <el-form-item label="设备型号" prop="neType" key="neType">
              <template v-if="form.siteType === 'HUB'">
                <el-select :disabled="lanWan" v-model="form.neType" style="width: 100%;">
                  <el-option value="ZXWT_ISG6800_4E" label="ZXWT ISG6800-4E"></el-option>
                </el-select>
              </template>
              <template v-else>
                <el-select :disabled="lanWan" v-model="form.neType" style="width: 100%;">
                  <el-option
                    v-for="(item, index) in types"
                    :key="index"
                    :value="item.id"
                    :label="item.displayName"
                  ></el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <!-- 租户名称 -->
            <el-form-item label="租户名称" prop="dgId" key="dgId">
              <el-select
                :disabled="lanWan"
                class="order-cover-select"
                v-model="form.dgId"
                clearable
                @clear="filterVmModel"
                placeholder="请选择租户"
                filterable
                v-el-select-loadmore="loadmore"
                :filter-method="filterVmModel"
                style="width: 100%;"
                @change="selDgVPN"
              >
                <el-option
                  v-for="item in tenants"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <!-- 省市区 -->
            <el-form-item label="省市区" prop="regionAddress" key="regionAddress">
              <el-cascader
                size="large"
                :options="options"
                v-model="form.regionAddress"
                style="width: 100%;"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <!-- 详细地址 -->
            <el-form-item label="详细地址" prop="address" key="address">
              <el-input v-model="form.address" maxlength="200" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <!-- 责任人 -->
            <el-form-item label="责任人" prop="personLiable" key="personLiable">
              <el-input v-model="form.personLiable" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <!-- 联系方式 -->
            <el-form-item label="联系方式" prop="telephone" key="telephone">
              <el-input v-model="form.telephone" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <!-- IP类型 -->
            <el-form-item label="IP类型" prop="ipType" key="ipType">
              <el-select v-model="form.ipType" style="width: 100%;">
                <el-option value="IPv4" label="IPv4"></el-option>
                <el-option value="IPv6" label="IPv6"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" v-if="form.siteType === 'POP'">
            <!-- POP属性 -->
            <el-form-item
              label="POP属性"
              :rules="[{ required: true, message: '请至少选择一个', trigger: 'change' }]"
              prop="siteRole"
              key="siteRole"
            >
              <el-select v-model="form.siteRole" style="width: 100%;">
                <el-option value="CROSS" label="跨境"></el-option>
                <el-option value="PROVINCE" label="省级"></el-option>
                <el-option value="CITY" label="地市级"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :xs="24"
            :sm="12"
            :lg="6"
            v-if="form.siteType === 'CPE' || form.siteType === 'HUB'"
          >
            <!-- 开启DNS Proxy -->
            <el-form-item label="DNS" prop="dnsProxy" key="dnsProxy">
              <el-switch
                :disabled="lanWan"
                v-model="form.dnsProxy"
                :active-text="form.dnsProxy ? '开启Proxy' : '关闭Proxy'"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" v-if="form.siteType === 'CPE'">
            <!-- 开启4G -->
            <el-form-item label="开启4G" prop="lte" key="lte">
              <el-switch :disabled="lanWan" v-model="form.lte"></el-switch>
            </el-form-item>
          </el-col>
          <template v-if="form.siteType === 'CPE'">
            <!-- 开启WiFi -->
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="开启WiFi" prop="wifi" key="wifi">
                <el-switch :disabled="lanWan" v-model="form.wifi"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" v-if="form.wifi">
              <!-- WiFi选择 -->
              <el-form-item
                label="WiFi"
                :rules="[{ type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }]"
                prop="wifis"
                key="wifis"
              >
                <el-checkbox-group :disabled="lanWan" v-model="form.wifis">
                  <el-checkbox label="2.4"></el-checkbox>
                  <el-checkbox label="5.8"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6" v-if="form.siteType === 'CPE'">
            <el-form-item label="高可用" prop="ha" key="ha">
              <template v-if="form.neType === 'ZXR10_3800' || form.neType === 'ZXR10_2800'">
                <el-switch disabled v-model="form.ha"></el-switch>
              </template>
              <template v-else>
                <el-switch :disabled="lanWan" v-model="form.ha"></el-switch>
              </template>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="时钟同步" prop="ntp" key="ntp">
              <el-switch v-model="form.ntp"></el-switch>
            </el-form-item>
          </el-col>
          <el-col
            :xs="24"
            :sm="12"
            :lg="6"
            v-if="form.siteType === 'CPE' || form.siteType === 'HUB'"
          >
            <el-form-item label="LAN模式" prop="lanModel" key="lanModel">
              <el-switch
                :disabled="lanWan"
                v-model="form.lanModel"
                :active-text="form.lanModel ? '自动获取' : '手动配置'"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col
            :xs="24"
            :sm="12"
            :lg="6"
            v-if="form.siteType === 'CPE' || form.siteType === 'HUB'"
          >
            <el-form-item label="本地上网" prop="localInternetAccess" key="localInternetAccess">
              <el-switch :disabled="lanWan" v-model="form.localInternetAccess"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <port :vpnls="vpnls" :site="form" @handleLanWan="handleLanWan($event)" ref="portlist" />
        <el-button style="width: 90px" @click="cancel">返回</el-button>
        <el-button type="primary" style="width: 90px" @click="submitForm('siteForm')">创建</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data';
import port from './port';
import $ from 'jquery';
export default {
  props: ['product'],
  components: {
    port
  },
  directives: {
    // 计算是否滚动到最下面
    'el-select-loadmore': {
      bind (el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          // scrollHeight 获取元素内容高度(只读)
          // scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
          // clientHeight 读取元素的可见高度(只读)
          // 如果元素滚动到底, 下面等式返回true, 没有则返回false:
          const condition = Math.round(this.scrollHeight - this.scrollTop) <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },
  data () {
    return {
      // 默认经纬度
      local: {
        lng: '116.403909',
        lat: '39.914824'
      },
      // 省市区选项
      options: regionData,
      form: {
        // 站点名称
        sitename: null,
        // 站点类型
        siteType: null,
        // 设备型号
        neType: null,
        // 租户ID
        dgId: null,
        // 省市区编码
        regionAddress: [],
        // 详细地址
        address: null,
        // 责任人
        personLiable: null,
        // 联系方式
        telephone: null,
        // 开启DNS Proxy
        dnsProxy: false,
        // 开启4G
        lte: false,
        // 开启wifi
        wifi: false,
        // wifi
        wifis: [],
        // pop属性
        siteRole: null,
        // 高可用
        ha: false,
        // 时钟同步
        ntp: true,
        // Lan模式
        lanModel: true,
        // Wan本地上网
        localInternetAccess: false,
        // ip类型
        ipType: null
      },
      rules: {
        // 站点名称
        sitename: [{ required: true, message: '请输入站点名称', trigger: 'blur' }],
        // 站点类型
        siteType: [{ required: true, message: '请选择站点类型', trigger: 'change' }],
        // 设备型号
        neType: [{ required: true, message: '请选择设备型号', trigger: 'change' }],
        // ip类型
        ipType: [{ required: true, message: '请选择ip类型', trigger: 'change' }],
        // 租户ID
        dgId: [{ required: true, message: '请选择租户', trigger: 'change' }],
        // 省市区编码
        regionAddress: [{ type: 'array', required: true, message: '请选择省市区地址', trigger: 'change' }],
        // 详细地址
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        // 责任人
        personLiable: [{ required: true, message: '请输入责任人', trigger: 'blur' }],
        // 联系方式
        telephone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
      },
      lanWan: false,
      // 分页数据
      tenants: [],
      // 分页参数
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      // 筛选文本
      filterText: '',
      // VPN数据
      vpnls: []
    };
  },
  watch: {
    // 网元类型
    'form.siteType': function(val) {
      let _this = this;
      _this.form.neType = null;
      if (val === 'CPE' || val === 'HUB') {
        _this.form.dgId = null;
      } else {
        _this.form.dgId = null;
        _this.form.dnsProxy = false;
        _this.form.lte = false;
        _this.form.wifi = false;
        _this.form.ha = false;
        _this.form.lanModel = true;
        _this.form.localInternetAccess = false;
      }
    },
    // WiFi
    'form.wifi': function(val) {
      let _this = this;
      if (!val) {
        _this.form.wifis = [];
      }
    },
    // 特殊型号无法开启高可用
    'form.neType': function(val) {
      let _this = this;
      if (val === 'ZXR10_3800' || val === 'ZXR10_2800' || val === 'ZXWT_ISG280' || val === 'ZXWT_ISG6800_4E') {
        _this.form.ha = false;
      }
    }
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.loadmore(true);
    });
  },
  methods: {
    // 分页方法 详见 directives
    loadmore (firstTag) {
      let _this = this;
      // 筛选时下拉不触发分页
      if (!_this.filterText) {
        if (!firstTag) {
          _this.page.page++;
        }
        let params = {
          limit: _this.page.pageSize,
          offset: (_this.page.page - 1) * _this.page.pageSize
        };
        _this.tenantQuery(params);
      }
    },
    // 筛选方法
    filterVmModel (value) {
      let _this = this;
      _this.filterText = value;
      // 筛选数据，有值时清空选项并按照关键字搜索对应结果集合
      if (value) {
        _this.tenants = [];
        _this.$nextTick(() => {
          _this.page = {
            page: 1,
            pageSize: 15,
            total: 0
          };
          let params = {
            label: _this.filterText,
            limit: _this.page.pageSize,
            offset: (_this.page.page - 1) * _this.page.pageSize
          };
          _this.tenantQuery(params);
        });
      } else {
        // 空值时，触发重置
        this.tenants = [];
        this.$nextTick(() => {
          _this.page = {
            page: 1,
            pageSize: 15,
            total: 0
          };
          let params = {
            limit: _this.page.pageSize,
            offset: (_this.page.page - 1) * _this.page.pageSize
          };
          _this.tenantQuery(params);
        });
      }
    },
    // 请求租户
    tenantQuery (data) {
      let _this = this;
      if (_this.form.siteType === 'CPE' || _this.form.siteType === 'HUB') {
        data.hasDefault = false;
      } else {
        data.hasDefault = true;
      }
      _this.$http.post({
        url: '/api/sdwan/tenant/getMultiDg',
        data
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          let { objects } = resultBody;
          let arry = [];
          for (let i = 0; i < objects.length; i++) {
            arry.push({
              label: objects[i].userlabel,
              value: objects[i].id
            });
          }
          _this.tenants.push(...arry);
        }
      });
    },
    // 返回
    cancel () {
      let _this = this;
      _this.$emit('handleChange', 0);
    },
    // 添加LAN、WAN后锁定或释放站点类型、设备型号、WiFi、4G、高可用、LAN模式、本地上网
    handleLanWan (val) {
      let _this = this;
      _this.lanWan = val;
    },
    // 选择设备类型
    selDeviceType () {
      let _this = this;
      _this.page = {
        page: 1,
        pageSize: 15,
        total: 0
      };
      this.tenants = [];
      let params = {
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.tenantQuery(params);
      if (_this.form.siteType === 'POP') {
        let arry = [];
        for (let i = 0; i < _this.product.length; i++) {
          if (_this.product[i].extAttrs.series === 'pop') {
            arry.push(_this.product[i]);
          }
        }
        _this.types = arry;
      }
      if (_this.form.siteType === 'CPE') {
        let arry = [];
        for (let i = 0; i < _this.product.length; i++) {
          if (_this.product[i].extAttrs.series === 'cpe' && _this.product[i].id !== 'ZXR10_CG200') {
            arry.push(_this.product[i]);
          }
        }
        _this.types = arry;
        // 如果高可用，默认开启VLAN
        if (_this.form.ha) {
          for (let i = 0; i < _this.lanform.lans.length; i++) {
            _this.lanform.lans[i].vlanOpera = true;
          }
        }
      }
      if (_this.form.siteType === 'PON') {
        let arry = [];
        for (let i = 0; i < _this.product.length; i++) {
          if (_this.product[i].id === 'ZXR10_CG200') {
            arry.push(_this.product[i]);
          }
        }
        _this.types = arry;
      }
    },
    // 选择租户 - 关联查询租户相关VPN
    selDgVPN () {
      let _this = this;
      let params = {
        limit: 0,
        offset: 0,
        dgId: _this.form.dgId
      };
      _this.$http.post({
        url: '/api/sdwan/vpn/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.vpnls = resultBody.objects;
        }
      });
    },
    // 省市区详细地址
    area () {
      let _this = this;
      let name = '';
      // eslint-disable-next-line no-return-assign
      _this.form.regionAddress.map(item => name += CodeToText[item]);
      return name + _this.form.address;
    },
    // 提交表单
    submitForm (formName) {
      let _this = this;
      // eslint-disable-next-line complexity
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          let resultForm = {
            // 站点类型
            accessDeviceType: _this.form.siteType === 'POP' ? 'POP' : 'CPE',
            // 站点对象
            site: {
              // HUB属性
              subSiteType: _this.form.siteType === 'HUB' ? 'HUB' : null,
              // 站点名称
              sitename: _this.form.sitename,
              // 站点类型
              accessDeviceType: _this.form.siteType === 'POP' ? 'POP' : 'CPE',
              // 类型
              siteType: _this.form.siteType === 'POP' ? 'POP' : 'CPE',
              // 设备型号
              neType: _this.form.neType,
              // 租户ID
              dgId: _this.form.dgId,
              // iP类型
              neIpType: _this.form.ipType,
              // 省市区Code
              regionAddress: _this.form.regionAddress.join(','),
              // 详细地址
              address: _this.form.address,
              // 拓展属性
              extAttrs: {
                // 省市区详细地址
                specificAddress: _this.area(),
                lng: _this.local.lng,
                lat: _this.local.lat
              },
              // 责任人
              personLiable: _this.form.personLiable,
              // 联系方式
              telephone: _this.form.telephone,
              // 开启DNS Proxy
              dnsProxy: _this.form.dnsProxy,
              // 开启4G
              lte: _this.form.lte,
              // 开启wifi
              wifi: _this.form.wifi,
              // wifi
              wifis: _this.form.wifi ? _this.form.wifis.toString() : null,
              // pop属性
              siteRole: _this.form.siteType === 'POP' ? _this.form.siteRole.toString() : null,
              // 高可用
              ha: _this.form.ha,
              // 时钟同步
              ntp: _this.form.ntp,
              // LAN - 手动 / 自动
              lanModel: _this.form.siteType === 'POP' ? null : _this.form.lanModel ? 'AUTO' : 'MANUAL',
              // 本地上网
              localInternetAccess: _this.form.localInternetAccess,
              // LAN侧
              lans: [],
              // WAN侧
              wans: []
            }
          };
          let lans = _this.$refs['portlist'].lanList;
          let wans = _this.$refs['portlist'].wanList;
          // 判断CPE
          if (_this.form.siteType === 'CPE' || _this.form.siteType === 'HUB') {
            if (lans.length === 0) {
              _this.$message.error('请至少添加一个LAN');
              return;
            } else {
              if (_this.form.wifis.indexOf('2.4') > -1) {
                let result = lans.find(item => {
                  return item.type === 'WIFI-2.4';
                });
                if (!result) {
                  _this.$message.error('请至少添加一个WiFi 2.4');
                  return;
                }
              }
              if (_this.form.wifis.indexOf('5.8') > -1) {
                let result = lans.find(item => {
                  return item.type === 'WIFI-5.8';
                });
                if (!result) {
                  _this.$message.error('请至少添加一个WiFi 5.8');
                  return;
                }
              }
            }
            // 判断高可用
            if (_this.form.ha) {
              if (wans.length === 0) {
                _this.$message.error('请至少添加一个网关1-WAN、网关2-WAN');
                return;
              } else {
                let oneResult = wans.find(item => {
                  return item.type === '网关1-WAN';
                });
                // eslint-disable-next-line max-depth
                if (!oneResult) {
                  _this.$message.error('请至少添加一个网关1-WAN');
                  return;
                }
                let twoResult = wans.find(item => {
                  return item.type === '网关2-WAN';
                });
                // eslint-disable-next-line max-depth
                if (!twoResult) {
                  _this.$message.error('请至少添加一个网关2-WAN');
                  return;
                }
                // 判断是否开启4G
                if (_this.form.lte) {
                  // eslint-disable-next-line max-depth
                  let onResult = wans.find(item => {
                    return item.type === '网关1-4G';
                  });
                  // eslint-disable-next-line max-depth
                  if (!onResult) {
                    _this.$message.error('请至少添加一个网关1-4G');
                    return;
                  }
                  // eslint-disable-next-line max-depth
                  let twoResult = wans.find(item => {
                    return item.type === '网关2-4G';
                  });
                  // eslint-disable-next-line max-depth
                  if (!twoResult) {
                    _this.$message.error('请至少添加一个网关2-4G');
                    return;
                  }
                }
              }
            } else {
              if (wans.length === 0) {
                _this.$message.error('请至少添加一个WAN');
                return;
              } else {
                let result = wans.find(item => {
                  return item.type === 'WAN';
                });
                if (!result) {
                  _this.$message.error('请至少添加一个WAN');
                  return;
                }
                // 判断是否开启4G
                if (_this.form.lte) {
                  let result = wans.find(item => {
                    return item.type === '4G';
                  });
                  // eslint-disable-next-line max-depth
                  if (!result) {
                    _this.$message.error('请至少添加一个4G');
                    return;
                  }
                }
              }
            }
          } else {
            if (wans.length === 0) {
              _this.$message.error('请至少添加一个WAN');
              return;
            } else {
              let result = wans.find(item => {
                return item.type === 'WAN';
              });
              if (!result) {
                _this.$message.error('请至少添加一个WAN');
                return;
              }
              // 判断是否开启4G
              if (_this.form.lte) {
                let result = wans.find(item => {
                  return item.type === '4G';
                });
                // eslint-disable-next-line max-depth
                if (!result) {
                  _this.$message.error('请至少添加一个4G');
                  return;
                }
              }
            }
          }
          if (lans.length === 0) {
            resultForm.site.lans = [];
          } else {
            let lanArry = [];
            for (let i = 0; i < lans.length; i++) {
              let arry = {
                // 别名
                alias: lans[i].type === 'LAN' ? 'LAN' + (i + 1) : lans[i].type,
                // 端口
                name: lans[i].port ? lans[i].port[2] : null,
                // LAN类型
                lanType: lans[i].type === 'LAN' ? 'LAN' : 'WIFI',
                // WiFi类型
                lanWifiType: lans[i].type === 'WIFI-2.4' ? '2.4' : lans[i].type === 'WIFI-5.8' ? '5.8' : null,
                // VPN
                vpnId: lans[i].vpnId,
                // 开启限速
                enableRateLimit: lans[i].enableRateLimit,
                // 带宽
                rateLimitValue: lans[i].enableRateLimit ? lans[i].rateLimitValue : null,
                // 开启VLAN
                vlanOpera: lans[i].vlanOpera,
                // VLAN值
                vlan: lans[i].vlan,
                // 开启DHCP
                enableDhcp: lans[i].enableDhcp,
                // 开启Proxy
                dnsProxy: lans[i].dnsProxy,
                // 虚拟IP
                fictitiousGatewayIp: lans[i].fictitiousGatewayIp,
                // 网关1 - IP/掩码
                oneGatewayIp: lans[i].oneGatewayIp.ip === null ? null : lans[i].oneGatewayIp.ip + '/' + lans[i].oneGatewayIp.mask,
                // 网关1 - 优先级
                oneGatewayPriority: lans[i].oneGatewayIp.priority ? Number(lans[i].oneGatewayIp.priority) : null,
                // 网关1 - IP/掩码
                twoGatewayIp: lans[i].twoGatewayIp.ip === null ? null : lans[i].twoGatewayIp.ip + '/' + lans[i].twoGatewayIp.mask,
                // 网关1 - 优先级
                twoGatewayPriority: lans[i].twoGatewayIp.priority ? Number(lans[i].twoGatewayIp.priority) : null,
                // 地址池 - 起始
                ipPoolFrom: lans[i].ipPoolFrom,
                // 地址池 - 结束
                ipPoolTo: lans[i].ipPoolTo,
                // 主DNS
                primaryDns: lans[i].primaryDns,
                // 备DNS
                backupDns: lans[i].backupDns
              };
              lanArry.push(arry);
            }
            resultForm.site.lans = lanArry;
          }
          let wanArry = [];
          let wan1 = [];
          let wan2 = [];
          for (let i = 0; i < wans.length; i++) {
            if (_this.form.ha) {
              if (wans[i].type === '网关1-WAN' || wans[i].type === '网关1-4G') {
                wan1.push(wans[i]);
              }
              if (wans[i].type === '网关2-WAN' || wans[i].type === '网关2-4G') {
                wan2.push(wans[i]);
              }
            } else {
              let arry = {
                // 别名
                alias: wans[i].type === 'WAN' ? 'WAN' + (i + 1) : '4G',
                // 端口
                name: wans[i].port ? wans[i].port[2] : null,
                // WAN端口类型
                wanType: wans[i].type === '4G' ? 'LTE' : 'ETHERIC',
                // 线路类型
                lineType: wans[i].lineType,
                // 运营商
                netOperator: wans[i].compType,
                // 带宽
                upbandWidth: wans[i].bandwidth,
                // 广域网优化
                enableWanOptimization: wans[i].enableWanOptimization,
                // 获取方式
                addressAcquisition: wans[i].getPathType,
                // 优先级
                priority: wans[i].priority,
                // 网关地址
                gatewayIp: wans[i].wayAddress,
                // IP/掩码
                ip: wans[i].ipAddress && wans[i].mask ? wans[i].ipAddress + '/' + wans[i].mask : null,
                // 用户
                userName: wans[i].userName,
                // 密码
                password: wans[i].passWord,
                // 网关1
                standByRelation: 'ONE'
              };
              wanArry.push(arry);
            }
          }
          if (wan1.length > 0 || wan2.length > 0) {
            for (let i = 0; i < wan1.length; i++) {
              let arry = {
                // 别名
                alias: wan1[i].type.indexOf('WAN') > -1 ? 'WAN' + (i + 1) : '4G',
                // 端口
                name: wan1[i].port ? wan1[i].port[2] : null,
                // WAN端口类型
                wanType: wan1[i].type.indexOf('4G') > -1 ? 'LTE' : 'ETHERIC',
                // 线路类型
                lineType: wan1[i].lineType,
                // 运营商
                netOperator: wan1[i].compType,
                // 带宽
                upbandWidth: wan1[i].bandwidth,
                // 广域网优化
                enableWanOptimization: wan1[i].enableWanOptimization,
                // 获取方式
                addressAcquisition: wan1[i].getPathType,
                // 优先级
                priority: wan1[i].priority,
                // 网关地址
                gatewayIp: wan1[i].wayAddress,
                // IP/掩码
                ip: wan1[i].ipAddress && wan1[i].mask ? wan1[i].ipAddress + '/' + wan1[i].mask : null,
                // 用户
                userName: wan1[i].userName,
                // 密码
                password: wan1[i].passWord,
                // 网关1、2
                standByRelation: 'ONE'
              };
              wanArry.push(arry);
            }
            for (let i = 0; i < wan2.length; i++) {
              let arry = {
                // 别名
                alias: wan2[i].type.indexOf('WAN') > -1 ? 'WAN' + (i + 1) : '4G',
                // 端口
                name: wan2[i].port ? wan2[i].port[2] : null,
                // WAN端口类型
                wanType: wan2[i].type.indexOf('4G') > -1 ? 'LTE' : 'ETHERIC',
                // 线路类型
                lineType: wan2[i].lineType,
                // 运营商
                netOperator: wan2[i].compType,
                // 带宽
                upbandWidth: wan2[i].bandwidth,
                // 广域网优化
                enableWanOptimization: wan2[i].enableWanOptimization,
                // 获取方式
                addressAcquisition: wan2[i].getPathType,
                // 优先级
                priority: wan2[i].priority,
                // 网关地址
                gatewayIp: wan2[i].wayAddress,
                // IP/掩码
                ip: wan2[i].ipAddress && wan2[i].mask ? wan2[i].ipAddress + '/' + wan2[i].mask : null,
                // 用户
                userName: wan2[i].userName,
                // 密码
                password: wan2[i].passWord,
                // 网关1、2
                standByRelation: 'TWO'
              };
              wanArry.push(arry);
            }
          }
          resultForm.site.wans = wanArry;
          $.ajax({
            url: 'https://restapi.amap.com/v3/geocode/geo',
            type: 'get',
            dataType: 'jsonp',
            data: {
              key: '6e7239cd1f1aaf595bca3753a67986f8',
              address: resultForm.site.extAttrs.specificAddress
            },
            success: function(data) {
              if (data.status === '0') {
                _this.$http.post({
                  url: '/api/sdwan/site/create',
                  data: resultForm
                }).then(res => {
                  let { status } = res;
                  if (status === '0') {
                    _this.$message.success('创建成功！');
                    _this.$parent.refresh();
                    _this.cancel();
                  }
                });
              } else {
                if (data.geocodes.length !== 0) {
                  let coordinate = data.geocodes[0].location.split(',');
                  resultForm.site.extAttrs.lng = coordinate[0];
                  resultForm.site.extAttrs.lat = coordinate[1];
                } else {
                  resultForm.site.extAttrs.lng = '116.403909';
                  resultForm.site.extAttrs.lat = '39.914824';
                }
                _this.$http.post({
                  url: '/api/sdwan/site/create',
                  data: resultForm,
                  loading: true
                }).then(res => {
                  let { status } = res;
                  if (status === '0') {
                    _this.$message.success('创建成功！');
                    _this.$parent.refresh();
                    _this.cancel();
                  }
                });
              }
            },
            error: function(err) {
              _this.$http.post({
                url: '/api/sdwan/site/create',
                data: resultForm,
                loading: true
              }).then(res => {
                let { status } = res;
                if (status === '0') {
                  _this.$message.success('创建成功！');
                  _this.$parent.refresh();
                  _this.cancel();
                }
              });
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.site-content {
  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .ne-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>